<template>
  <el-dialog
    title="接口申请"
    :visible.sync="dialogVisible"
    width="1000px"
    @close="close"
  >
    <el-form ref="formRef" :model="form" :rules="formRules">
      <el-form-item label="申请原因" prop="remarks">
        <el-input v-model="form.remarks" type="textarea" :rows="3"/>
      </el-form-item>
    </el-form>
    <div class="service-headers">
      <div>服务名称</div>
      <div>服务编号</div>
      <div>服务从属系统</div>
      <div>申请系统</div>
      <div>操作</div>
    </div>
    <el-form ref="dynamicValidateForm" :model="dynamicValidateForm">
      <div
        v-for="(domain, index) in dynamicValidateForm.domains"
        :key="domain.key"
        class="domain-list"
      >
        <el-form-item
          :prop="'domains.' + index + '.provideId'"
          :rules="{
            required: true, message: '域名不能为空', trigger: 'blur'
          }"
          size="mini"
          style="display: flex;justify-content: center;flex: 1;"
        >
          <el-select v-model="domain.provideId" @change="serviceNameCli">
            <el-option
              v-for="item in tableData"
              :key="item.serviceCode"
              :label="item.serviceName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <div style="flex: 1;text-align: center">
          {{ findLabel(dynamicValidateForm.domains[index].provideId, 'serviceCode') }}
        </div>
        <div style="flex: 1;text-align: center">{{
            findLabel(dynamicValidateForm.domains[index].provideId, 'systemName')
          }}
        </div>
        <el-form-item
          :prop="'domains.' + index + '.requestIds'"
          :rules="{
            required: true, message: '域名不能为空', trigger: 'blur'
          }"
          size="mini"
          style="display: flex;justify-content: center;flex: 1;"
        >
          <el-select
            v-model="domain.requestIds"
            multiple
            clearable
            collapse-tags
            filterable
            placeholder="请选择申请系统"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.systemName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <div style="flex: 1;text-align: center">
          <el-button style="flex: 1;" @click.prevent="removeDomain(domain)">删除</el-button>
        </div>

      </div>
      <el-form-item>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
        <el-button @click="addDomain">新增申请</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script>
import {addQuerst, getSystemList, serviceDetail} from '../../../api/myOpenService'

export default {
  name: 'AddBatchesOpenSer',
  props: {
    tableData: {
      type: Array
    }
  },
  data() {
    return {
      asdf: {},
      options: null,
      dialogVisible: false,
      form: {
        remarks: null
      },
      formRules: {
        remarks: {required: true, message: '请填写申请原因', trigger: 'blur'}
      },
      dynamicValidateForm: {
        domains: [{
          value: ''
        }]
      }
    }
  },
  created() {
    getSystemList().then(res => {
      if (res.code === '00000') this.options = res.data
    })
  },
  methods: {
    close() {
      this.form = {}
      this.$refs.formRef.resetFields()
      this.dynamicValidateForm = {
        domains: [{
          value: ''
        }]
      }
    },

    findLabel(value, field) {
      const selectedOption = this.tableData.find(option => option.id === value)
      return selectedOption ? selectedOption[field] : '暂无'
    },

    serviceNameCli(val) {
      const a = this.tableData.find(item => item.id === val)
      a ? a.id : null
      serviceDetail({id: a.id}).then(res => {
        if (res.code == '00000') {
          this.asdf = res.data
          console.log('this.asdf', this.asdf)
        }
      })
    },
    submitForm(formName) {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.dynamicValidateForm.domains.forEach((item, index) => {
                addQuerst({
                  provideId: item.provideId,
                  requestIds: item.requestIds,
                  ...this.form
                }).then(res => {
                  if (res.code === '00000') {
                    if (this.dynamicValidateForm.domains.length === (index + 1)) this.$message.success('申请成功')
                    this.$emit('resetBtn')
                    this.close()
                  }
                }).finally(e => {
                  this.dialogVisible = false
                })
              })
            } else {
              return false
            }
          })
        } else {
          return false
        }
      })
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.service-headers, .domain-list {
  display: flex;
  margin-bottom: 10px;
}

.service-headers div, .domain-list > div {
  flex: 1;
  text-align: center;
}
</style>
